<template>
	<view class="container">
		<cu-custom isBack bgColor="bg-white">
			<block slot="content">订单列表</block>
		</cu-custom>
		<h-tabs :data="typeList" :currentTab="typeCurrent" :width="750" backgroundColor="#fff"
			:itemWidth="750/typeList.length" @change="handlertypeChange" 
			selected-color="rgb(0, 123, 70)" bold height="80" 
			:sliderWidth="600/typeList.length" sliderBgColor="rgb(0, 123, 70)"></h-tabs>
		<view :style="{ height: 'calc(100vh - ' + CustomBar + 'px - 80rpx)' }">
			<mescroll-uni ref="mescrollRef" :down="downOption" @down="downCallback" 
				@up="upCallback" :up="upOption" :fixed="false">
				<view class="margin bg-white padding radius-sm" 
					v-for="(item, index) in listData" :key="index"
					@tap="goOrderDetail(item)">
					<view class="order-header flex justify-between">
						<view class="text-gray">订单编号{{item.no}}</view>
						<view v-if="item.status == 'wait'" class="text-green">已预约</view>
						<view v-else-if="item.status == 'complete'" class="text-green">已完成</view>
						<view v-else-if="item.status == 'cancel'" class="text-gray">已取消</view>
					</view>
					<view class="order-info">
						<view v-if="item.goods_id==1" class="order-item">
							<text class="title">服务产品</text>
							<text>局部改造</text>
						</view>
						<view v-else-if="item.goods_id==2" class="order-item">
							<text class="title">服务产品</text>
							<text>防水补漏</text>
						</view>
						<view v-else-if="item.goods_id==3" class="order-item">
							<text class="title">服务产品</text>
							<text>墙面翻新</text>
						</view>
						<view v-else-if="item.goods_id==4" class="order-item">
							<text class="title">服务产品</text>
							<text>维修安装</text>
						</view>
						<view v-else class="order-item">
							<text class="title">服务产品</text>
							<text>{{item.order_goods[0]&&item.order_goods[0].name}}</text>
						</view>
						<view class="order-item">
							<text class="title">下单时间</text>
							<text>{{item.createtime_text}}</text>
						</view>
					</view>
					<view v-if="item.status!='cancel'" class="flex justify-end margin-top">
						<!-- <button class="cu-btn line-green round sm">联系商家</button> -->
						<button v-if="item.status!='complete'" class="cu-btn line-gray round sm" @tap.stop="cancelOrder(item.id, item)">取消订单</button>
					</view>
				</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import { BASE_URL, getOrderList, cancelOrder } from "@/common/api/auth";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				CustomBar: this.CustomBar,
				baseUrl: BASE_URL,
				typeList: [{
					name: '已预约',
					key: 'wait'
				},{
					name: '已完成',
					key: 'complete'
				},{
					name: '已取消',
					key: 'cancel'
				}],
				typeCurrent: 0,
				listData: [],
				downOption: {
					use: true,
					auto: false,
				},
				upOption: {
					auto: true,
					noMoreSize: 5,
					textNoMore: "没有更多了",
					page: {
						num: 0,
						size: 10,
					},
					empty: {
						icon: "/static/img/none.png",
						tip: "您当前还没有订单",
					}
				}
			}
		},
		onLoad(options) {
			this.typeCurrent = options.type||0
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll(true);
			},
			upCallback(page) {
				let params = {
					limit: page.size,
					page: page.num,
					status: this.typeList[this.typeCurrent].key
				}
				const that = this
				getOrderList(params).then(res => {
					if(res&&res.code==1) {
						let data = res.data
						that.mescroll.endBySize(data.data.length, data.total)
						if(page.num == 1) that.listData = []
						that.listData = that.listData.concat(data.data)
					}
				})
				
			},
			handlertypeChange(e) {
				if(e.index !== this.typeCurrent) {
					this.typeCurrent = e.index
					this.downCallback()
				}
			},
			cancelOrder(id, item) {
				const that = this
				cancelOrder({id: id}).then(res => {
					if(res&&res.code == 1) {
						that.$tools.msg('取消成功')
						that.$set(item, 'status', 'cancel')
					}
				})
			},
			goOrderDetail(item) {
				this.$tools.to('/pages/order/detail?order='+encodeURIComponent(JSON.stringify(item)))
			}
		}
	}
</script>

<style scoped>
	.order-header {
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		border-bottom: 2rpx solid #aaa;
	}
	.order-item {
		margin-bottom: 20rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
	}
	.order-item .title {
		display: block;
		color: #aaa;
		min-width: 200rpx;
	}
	.cu-btn + .cu-btn {
		margin-left: 30rpx;
	}
</style>